<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<u-navbar bgColor="#F5F9FC" :placeholder="true">
			<view slot="left" class="navbar-left">
				<navigator url="/pages/index/index" open-type="switchTab" class="back-button">
					<view class="nav-back-content">
						<u-icon color="#1e88e5" name="arrow-left"></u-icon>
						<text class="nav-title">工资管理</text>
					</view>
				</navigator>
			</view>
			<view slot="right" class="navbar-right">
				<view class="nav-icon-btn" @click="toggleFilterPanel">
					<u-icon color="#6b7280" name="list-dot" size="20"></u-icon>
				</view>
				<view class="nav-icon-btn" @click="toggleSearchBar">
					<u-icon color="#6b7280" name="search" size="20"></u-icon>
				</view>
			</view>
		</u-navbar>

		<!-- 标签页导航 -->
		<view class="tab-container">
			<view class="container">
				<view class="tab-list">
					<view class="tab-item" :class="activeTab === 'all' ? 'tab-active' : ''" @click="switchTab('all')">全部
					</view>
					<view class="tab-item" :class="activeTab === 'pending' ? 'tab-active' : ''"
						@click="switchTab('pending')">待发放</view>
					<view class="tab-item" :class="activeTab === 'completed' ? 'tab-active' : ''"
						@click="switchTab('completed')">已发放</view>
					<view class="tab-item" :class="activeTab === 'archived' ? 'tab-active' : ''"
						@click="switchTab('archived')">已归档</view>
				</view>
			</view>
		</view>

		<!-- 搜索栏 (默认隐藏) -->
		<view class="search-container" :class="showSearchBar ? 'search-show' : 'search-hide'">
			<view class="container">
				<view class="search-wrap">
					<input type="text" placeholder="搜索工资单..." class="search-input" v-model="searchKeyword"
						@input="searchSalarySlips">
					<u-icon name="search" class="search-icon" color="#9ca3af" size="18"></u-icon>
					<view class="search-close" @click="toggleSearchBar">
						<u-icon name="close" color="#9ca3af" size="18"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 筛选面板 (默认隐藏) -->
		<view class="modal-container" :class="showFilterPanel ? 'modal-show' : 'modal-hide'">
			<view class="modal-mask" @click="toggleFilterPanel"></view>
			<view class="filter-content" :class="showFilterPanel ? 'filter-slide-up' : 'filter-slide-down'">
				<view class="filter-header">
					<text class="filter-title">筛选条件</text>
					<view class="filter-close" @click="toggleFilterPanel">
						<u-icon name="close" color="#6b7280" size="18"></u-icon>
					</view>
				</view>
				<view class="filter-body">
					<view class="form-item">
						<text class="form-label">发放月份</text>
						<picker mode="date" start="2010-01-01" :end="currentYearMonth" :value="selectedMonth"
							fields="month" @change="onMonthChange" class="form-picker">
							<view class="picker-display">{{ selectedMonth || '请选择月份' }}</view>
						</picker>
					</view>

					<view class="form-item">
						<text class="form-label">发放状态</text>
						<picker mode="selector" :range="salaryStatuses" range-key="label" v-model="selectedSalaryStatus"
							@change="onStatusChange" class="form-picker">
							<view class="picker-display">
								{{ selectedSalaryStatus === -1 ? '全部状态' : salaryStatuses[selectedSalaryStatus].label }}
							</view>
						</picker>
					</view>

					<view class="form-item">
						<text class="form-label">部门</text>
						<picker mode="selector" :range="departments" range-key="label" v-model="selectedDepartment"
							@change="onDepartmentChange" class="form-picker">
							<view class="picker-display">
								{{ selectedDepartment === -1 ? '全部部门' : departments[selectedDepartment].label }}
							</view>
						</picker>
					</view>

					<view class="form-item">
						<text class="form-label">薪资范围</text>
						<view class="form-input-group">
							<input type="number" placeholder="最小值" class="form-input" v-model="minAmount">
							<input type="number" placeholder="最大值" class="form-input" v-model="maxAmount">
						</view>
					</view>

					<view class="form-actions">
						<view class="btn-cancel" @click="resetFilters">重置</view>
						<view class="btn-submit" @click="applyFilters">确定</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 主内容区 -->
		<view class="content-container">
			<!-- 快捷操作 -->
			<view class="action-group">
				<navigator url="/pageNew/pages/salary/add-salary" class="action-card">
					<view class="action-icon action-icon-add">
						<u-icon name="plus-circle" size="20"></u-icon>
					</view>
					<text class="action-text">添加工资</text>
				</navigator>
				<view class="action-card" @click="batchPay">
					<view class="action-icon action-icon-pay">
						<u-icon name="rmb-circle" size="20"></u-icon>
					</view>
					<text class="action-text">批量发放</text>
				</view>
				<view class="action-card" @click="exportSalarySlips">
					<view class="action-icon action-icon-export">
						<u-icon name="attach" size="20"></u-icon>
					</view>
					<text class="action-text">导出工资单</text>
				</view>
				<view class="action-card" @click="showSalaryStatistics">
					<view class="action-icon action-icon-stat">
						<u-icon name="calendar-fill" size="20"></u-icon>
					</view>
					<text class="action-text">工资统计</text>
				</view>
			</view>

			<!-- 工资单列表 -->
			<view class="salary-list" v-if="filteredSalarySlips.length > 0">
				<view class="salary-card" v-for="(slip, index) in filteredSalarySlips" :key="index">
					<view class="salary-header">
						<view class="salary-user">
							<view class="user-avatar">
								<u-icon name="coupon-fill" size="20"></u-icon>
							</view>
							<view class="user-info">
								<text class="user-name">{{ slip.employeeName }}</text>
								<text class="user-dept">{{ slip.department }} | {{ slip.position }}</text>
							</view>
						</view>
						<text class="salary-status" :class="{
						  'status-pending': slip.status === 'pending',
						  'status-completed': slip.status === 'completed',
						  'status-archived': slip.status === 'archived',
						  'status-default': !['pending', 'completed', 'archived'].includes(slip.status)
						}">
							{{ getStatusText(slip.status) }}
						</text>
					</view>
					<view class="salary-detail">
						<view class="detail-item"><text class="detail-label">月份: </text><text
								class="detail-value">{{ slip.month }}</text></view>
						<view class="detail-item"><text class="detail-label">工号: </text><text
								class="detail-value">{{ slip.employeeId }}</text></view>
						<view class="detail-item"><text class="detail-label">实发: </text><text
								class="detail-value">¥{{ formatCurrency(slip.netSalary) }}</text></view>
					</view>
					<view class="salary-actions">
						<view class="salary-btn-view" @click="viewSalarySlip(slip.id)">查看</view>
						<view class="salary-btn-edit" @click="editSalarySlip(slip.id)">编辑</view>
						<view :class="slip.status === 'pending' ? 'salary-btn-pay' : 'salary-btn-archive'"
							@click="handleSalaryAction(slip.id, slip.status)">
							{{ slip.status === 'pending' ? '发放' : '归档' }}
						</view>
					</view>
				</view>
			</view>

			<!-- 无数据提示 -->
			<view class="no-data" v-else>
				<view class="no-data-icon">
					<u-icon name="file-text-o" size="32"></u-icon>
				</view>
				<text class="no-data-title">暂无工资单记录</text>
				<text class="no-data-desc">点击下方按钮添加第一张工资单</text>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="container">
				<view class="bottom-wrap">
					<view class="total-count">
						<text class="count-text">总计: <text class="count-num">{{ filteredSalarySlips.length }}</text>
							张工资单</text>
					</view>
					<navigator url="/pageNew/pages/salary/add-salary" class="bottom-add">
						<u-icon name="plus" size="16" class="add-icon"></u-icon>
						<text class="add-text">添加工资</text>
					</navigator>
				</view>
			</view>
		</view>

		<!-- 工资操作确认弹窗 -->
		<view class="modal-container-center" :class="showActionModal ? 'modal-show' : 'modal-hide'">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">{{ actionType === 'pay' ? '确认发放' : '确认归档' }}</text>
				</view>
				<view class="modal-body">
					<text class="modal-text">
						{{ actionType === 'pay' ? '您确定要发放这张工资单吗？' : '您确定要归档这张工资单吗？' }}
					</text>
					<input type="hidden" v-model="currentSalaryId" class="modal-hidden-input">
				</view>
				<view class="modal-footer">
					<view class="btn-cancel" @click="toggleActionModal">取消</view>
					<view :class="actionType === 'pay' ? 'btn-secondary' : 'btn-submit'" @click="confirmSalaryAction">
						{{ actionType === 'pay' ? '发放' : '归档' }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 标签页状态
				activeTab: 'all',
				// 搜索状态
				showSearchBar: false,
				searchKeyword: '',
				// 筛选状态
				showFilterPanel: false,
				selectedMonth: '',
				currentDate: this.formatDate(new Date()),
				currentYearMonth: this.formatYearMonth(new Date()),
				minAmount: '',
				maxAmount: '',
				// 部门和状态
				departments: [{
						value: 'tech',
						label: '技术部'
					},
					{
						value: 'sales',
						label: '销售部'
					},
					{
						value: 'marketing',
						label: '市场部'
					},
					{
						value: 'hr',
						label: '人力资源部'
					},
					{
						value: 'finance',
						label: '财务部'
					}
				],
				salaryStatuses: [{
						value: 'pending',
						label: '待发放'
					},
					{
						value: 'completed',
						label: '已发放'
					},
					{
						value: 'archived',
						label: '已归档'
					}
				],
				selectedDepartment: -1,
				selectedSalaryStatus: -1,
				// 工资单数据
				salarySlips: [{
						id: '1',
						employeeId: 'EMP001',
						employeeName: '张三',
						department: '技术部',
						position: '高级开发工程师',
						month: '2024-10',
						baseSalary: 15000.00,
						performanceSalary: 3000.00,
						allowance: 1000.00,
						overtimePay: 1000.00,
						socialSecurity: 1200.00,
						housingFund: 1800.00,
						incomeTax: 500.00,
						netSalary: 17500.00,
						status: 'pending',
						createdAt: '2024-10-30T10:00:00',
						updatedAt: '2024-10-30T10:00:00'
					},
					{
						id: '2',
						employeeId: 'EMP002',
						employeeName: '李四',
						department: '销售部',
						position: '销售经理',
						month: '2024-10',
						baseSalary: 12000.00,
						performanceSalary: 4000.00,
						allowance: 1000.00,
						overtimePay: 1000.00,
						socialSecurity: 960.00,
						housingFund: 1440.00,
						incomeTax: 400.00,
						netSalary: 15200.00,
						status: 'pending',
						createdAt: '2024-10-30T10:00:00',
						updatedAt: '2024-10-30T10:00:00'
					},
					{
						id: '3',
						employeeId: 'EMP003',
						employeeName: '王五五',
						department: '市场部',
						position: '市场专员',
						month: '2024-10',
						baseSalary: 6000.00,
						performanceSalary: 2000.00,
						allowance: 0.00,
						overtimePay: 0.00,
						socialSecurity: 480.00,
						housingFund: 0.00,
						incomeTax: 0.00,
						netSalary: 7520.00,
						status: 'pending',
						createdAt: '2024-10-30T10:00:00',
						updatedAt: '2024-10-30T10:00:00'
					},
					{
						id: '4',
						employeeId: 'EMP004',
						employeeName: '赵六',
						department: '技术部',
						position: '开发实习生',
						month: '2024-10',
						baseSalary: 4000.00,
						performanceSalary: 0.00,
						allowance: 0.00,
						overtimePay: 0.00,
						socialSecurity: 0.00,
						housingFund: 0.00,
						incomeTax: 0.00,
						netSalary: 4000.00,
						status: 'pending',
						createdAt: '2024-10-30T10:00:00',
						updatedAt: '2024-10-30T10:00:00'
					},
					{
						id: '5',
						employeeId: 'EMP005',
						employeeName: '孙七',
						department: '财务部',
						position: '财务主管',
						month: '2024-10',
						baseSalary: 12000.00,
						performanceSalary: 2000.00,
						allowance: 1000.00,
						overtimePay: 1000.00,
						socialSecurity: 960.00,
						housingFund: 1440.00,
						incomeTax: 300.00,
						netSalary: 13300.00,
						status: 'completed',
						createdAt: '2024-10-30T10:00:00',
						updatedAt: '2024-10-31T14:30:00'
					},
					{
						id: '6',
						employeeId: 'EMP001',
						employeeName: '张三',
						department: '技术部',
						position: '高级开发工程师',
						month: '2024-09',
						baseSalary: 15000.00,
						performanceSalary: 3000.00,
						allowance: 1000.00,
						overtimePay: 500.00,
						socialSecurity: 1200.00,
						housingFund: 1800.00,
						incomeTax: 450.00,
						netSalary: 17050.00,
						status: 'archived',
						createdAt: '2024-09-30T10:00:00',
						updatedAt: '2024-10-05T16:45:00'
					}
				],
				filteredSalarySlips: [],
				// 工资操作确认弹窗
				showActionModal: false,
				currentSalaryId: '',
				actionType: 'pay' // 'pay' 或 'archive'
			};
		},
		onLoad() {
			this.filteredSalarySlips = [...this.salarySlips];
			this.sortSalarySlipsByDate();
		},
		methods: {
			// 切换标签页
			switchTab(tab) {
				this.activeTab = tab;
				this.filterSalarySlips();
			},

			// 显示/隐藏搜索栏
			toggleSearchBar() {
				this.showSearchBar = !this.showSearchBar;
				if (this.showSearchBar) this.searchKeyword = '';
			},

			// 搜索工资单
			searchSalarySlips() {
				if (!this.searchKeyword) {
					this.filteredSalarySlips = [...this.salarySlips];
					this.filterSalarySlips();
					return;
				}

				const keyword = this.searchKeyword.toLowerCase();
				this.filteredSalarySlips = this.salarySlips.filter(slip =>
					slip.employeeName.toLowerCase().includes(keyword) ||
					slip.employeeId.toLowerCase().includes(keyword) ||
					slip.department.toLowerCase().includes(keyword) ||
					slip.position.toLowerCase().includes(keyword) ||
					slip.month.includes(keyword)
				);
				this.filterSalarySlips();
			},

			// 显示/隐藏筛选面板
			toggleFilterPanel() {
				this.showFilterPanel = !this.showFilterPanel;
			},

			// 月份变更
			onMonthChange(e) {
				this.selectedMonth = e.detail.value;
			},

			// 部门变更
			onDepartmentChange(e) {
				this.selectedDepartment = e.detail.value;
			},

			// 状态变更
			onStatusChange(e) {
				this.selectedSalaryStatus = e.detail.value;
			},

			// 重置筛选条件
			resetFilters() {
				this.selectedMonth = '';
				this.selectedDepartment = -1;
				this.selectedSalaryStatus = -1;
				this.minAmount = '';
				this.maxAmount = '';
				this.filterSalarySlips();
			},

			// 应用筛选条件
			applyFilters() {
				this.filterSalarySlips();
				this.toggleFilterPanel();
			},

			// 筛选工资单
			filterSalarySlips() {
				let filtered = [...this.salarySlips];

				// 标签页筛选
				if (this.activeTab !== 'all') {
					filtered = filtered.filter(slip => slip.status === this.activeTab);
				}

				// 月份筛选
				if (this.selectedMonth) {
					filtered = filtered.filter(slip => slip.month === this.selectedMonth);
				}

				// 部门筛选
				if (this.selectedDepartment !== -1) {
					const department = this.departments[this.selectedDepartment].label;
					filtered = filtered.filter(slip => slip.department === department);
				}

				// 状态筛选
				if (this.selectedSalaryStatus !== -1) {
					const status = this.salaryStatuses[this.selectedSalaryStatus].value;
					filtered = filtered.filter(slip => slip.status === status);
				}

				// 金额范围筛选
				if (this.minAmount) filtered = filtered.filter(slip => slip.netSalary >= this.minAmount);
				if (this.maxAmount) filtered = filtered.filter(slip => slip.netSalary <= this.maxAmount);

				this.filteredSalarySlips = filtered;
				this.sortSalarySlipsByDate();
			},

			// 按日期排序
			sortSalarySlipsByDate() {
				this.filteredSalarySlips.sort((a, b) => {
					if (a.month !== b.month) return b.month.localeCompare(a.month);
					return a.employeeName.localeCompare(b.employeeName);
				});
			},

			// 获取工资状态文本
			getStatusText(status) {
				const statusMap = {
					'pending': '待发放',
					'completed': '已发放',
					'archived': '已归档'
				};
				return statusMap[status] || status;
			},

			// 获取工资状态样式类名
			getSalaryStatusClass(status) {
				switch (status) {
					case 'pending':
						return 'status-pending';
					case 'completed':
						return 'status-completed';
					case 'archived':
						return 'status-archived';
					default:
						return 'status-default';
				}
			},

			// 格式化货币
			formatCurrency(amount) {
				return parseFloat(amount).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
			},

			// 格式化日期
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},

			// 格式化年月
			formatYearMonth(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				return `${year}-${month}`;
			},

			// 查看工资单
			viewSalarySlip(id) {
				uni.navigateTo({
					url: `/pageNew/pages/salary/view?id=${id}`
				});
			},

			// 编辑工资单
			editSalarySlip(id) {
				uni.navigateTo({
					url: `/pageNew/pages/salary/edit?id=${id}`
				});
			},

			// 处理工资操作
			handleSalaryAction(id, status) {
				this.currentSalaryId = id;
				this.actionType = status === 'pending' ? 'pay' : 'archive';
				this.showActionModal = true;
			},

			// 确认工资操作
			confirmSalaryAction() {
				const index = this.salarySlips.findIndex(slip => slip.id === this.currentSalaryId);
				if (index !== -1) {
					this.salarySlips[index].status = this.actionType === 'pay' ? 'completed' : 'archived';
					this.salarySlips[index].updatedAt = new Date().toISOString();

					// 更新筛选列表
					const filterIndex = this.filteredSalarySlips.findIndex(slip => slip.id === this.currentSalaryId);
					if (filterIndex !== -1) {
						this.filteredSalarySlips[filterIndex].status = this.actionType === 'pay' ? 'completed' :
							'archived';
					}
				}

				this.showActionModal = false;
				uni.showToast({
					title: this.actionType === 'pay' ? '工资发放成功' : '工资归档成功',
					icon: 'success'
				});
			},

			// 关闭操作弹窗
			toggleActionModal() {
				this.showActionModal = false;
			},

			// 批量发放
			batchPay() {
				const pendingSlips = this.filteredSalarySlips.filter(slip => slip.status === 'pending');
				if (pendingSlips.length === 0) {
					uni.showToast({
						title: '没有待发放的工资单',
						icon: 'none'
					});
					return;
				}

				uni.showModal({
					title: '确认批量发放',
					content: `确定要发放选中的 ${pendingSlips.length} 张工资单吗？`,
					success: (res) => {
						if (res.confirm) {
							pendingSlips.forEach(slip => {
								const index = this.salarySlips.findIndex(s => s.id === slip.id);
								if (index !== -1) {
									this.salarySlips[index].status = 'completed';
								}
							});
							this.filterSalarySlips();
							uni.showToast({
								title: `成功发放 ${pendingSlips.length} 张工资单`,
								icon: 'success'
							});
						}
					}
				});
			},

			// 导出工资单
			exportSalarySlips() {
				const slipsToExport = [...this.filteredSalarySlips];
				if (slipsToExport.length === 0) {
					uni.showToast({
						title: '没有可导出的工资单',
						icon: 'none'
					});
					return;
				}

				uni.showToast({
					title: `正在导出 ${slipsToExport.length} 张工资单`,
					icon: 'loading',
					duration: 2000
				});
				setTimeout(() => {
					uni.showToast({
						title: '工资单导出成功',
						icon: 'success'
					});
				}, 2000);
			},

			// 显示工资统计
			showSalaryStatistics() {
				uni.navigateTo({
					url: '/pageNew/pages/salary/statistics'
				});
			}
		}
	};
</script>
<style scoped>
	/* 全局容器 */
	.page-container {
		min-height: 100vh;
		background-color: #f9fafb;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	}

	/* 导航栏样式 */
	.navbar-left {
		display: flex;
		align-items: center;
	}

	.navbar-right {
		display: flex;
		align-items: center;
		gap: 16px;
		padding-right: 8px;
	}

	.nav-back {
		display: flex;
		align-items: center;
	}

	.nav-back-content {
		display: flex;
		align-items: center;
	}

	.nav-title {
		font-size: 16px;
		font-weight: 600;
		color: #1e88e5;
		margin-left: 8px;
	}

	.nav-icon-btn {
		background: transparent;
		border: none;
		padding: 4px;
	}

	/* 标签页样式 */
	.tab-container {
		background-color: #ffffff;
		border-bottom: 1px solid #e5e7eb;
		/* padding-top: 44px; */
		/* 适配导航栏占位高度 */
	}

	.tab-list {
		display: flex;
		border-bottom: 1px solid #e5e7eb;
	}

	.tab-item {
		flex: 1;
		padding: 12px 0;
		font-size: 14px;
		background: transparent;
		border: none;
		color: #6b7280;
	}

	.tab-active {
		color: #1e88e5;
		font-weight: 500;
		border-bottom: 2px solid #1e88e5;
	}

	/* 搜索栏样式 */
	.search-container {
		background-color: #ffffff;
		border-bottom: 1px solid #e5e7eb;
		padding: 8px 0;
		transition: all 0.3s ease;
	}

	.search-show {
		display: block;
	}

	.search-hide {
		display: none;
	}

	.search-wrap {
		position: relative;
	}

	.search-input {
		width: 100%;
		padding: 10px 12px 10px 36px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
	}

	.search-icon {
		position: absolute;
		left: 12px;
		top: 50%;
		transform: translateY(-50%);
	}

	.search-close {
		position: absolute;
		right: 12px;
		top: 50%;
		transform: translateY(-50%);
		background: transparent;
		border: none;
	}

	/* 筛选面板样式 */
	.modal-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
	}

	.modal-show {
		display: flex;
		flex-direction: column;
	}

	.modal-hide {
		display: none;
	}

	.modal-mask {
		flex: 1;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.filter-content {
		background-color: #ffffff;
		width: 100%;
		height: 60vh;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
		overflow-y: auto;
		transition: transform 0.3s ease;
	}

	.filter-slide-up {
		transform: translateY(0);
	}

	.filter-slide-down {
		transform: translateY(100%);
	}

	.filter-header {
		padding: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #e5e7eb;
	}

	.filter-title {
		font-size: 16px;
		font-weight: 500;
		color: #1f2937;
	}

	.filter-close {
		background: transparent;
		border: none;
	}

	.filter-body {
		padding: 16px;
	}

	/* 表单样式 */
	.form-item {
		margin-bottom: 16px;
	}

	.form-label {
		display: block;
		font-size: 12px;
		color: #6b7280;
		margin-bottom: 6px;
	}

	.form-picker {
		width: 100%;
	}

	.picker-display {
		width: 100%;
		padding: 10px 12px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
		color: #1f2937;
	}

	.form-input-group {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.form-input {
		width: 100%;
		padding: 10px 12px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
	}

	.form-actions {
		display: flex;
		justify-content: flex-end;
		gap: 8px;
		padding-top: 16px;
	}

	/* 主内容区样式 */
	.content-container {
		margin: 0 auto;
		padding: 16px;
		padding-bottom: 84px;
		/* 导航栏+标签栏+搜索栏总高度 */
	}

	/* 快捷操作样式 */
	.action-group {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 12px;
		margin-bottom: 16px;
	}

	.action-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		padding: 16px 8px;
		transition: all 0.3s ease;
	}

	.action-card:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}

	.action-icon {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 8px;
	}

	.action-icon-add {
		background-color: #E3F2FD;
		color: #1e88e5;
	}

	.action-icon-pay {
		background-color: #E3F2FD;
		color: #1e88e5;
	}

	.action-icon-export {
		background-color: #FFF3E0;
		color: #FF9800;
	}

	.action-icon-stat {
		background-color: #E8F5E9;
		color: #4CAF50;
	}

	.action-text {
		font-size: 12px;
		color: #1f2937;
	}

	/* 工资单列表样式 */
	.salary-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.salary-card {
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		padding: 16px;
	}

	.salary-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.salary-user {
		display: flex;
		align-items: center;
	}

	.user-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: #E3F2FD;
		color: #1e88e5;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12px;
	}

	.user-info {
		display: flex;
		flex-direction: column;
	}

	.user-name {
		font-size: 14px;
		font-weight: 500;
		color: #1f2937;
	}

	.user-dept {
		font-size: 12px;
		color: #6b7280;
		margin-top: 2px;
	}

	.salary-status {
		padding: 2px 8px;
		border-radius: 999px;
		font-size: 12px;
	}

	.status-pending {
		background-color: rgba(255, 152, 0, 0.1);
		color: #FF9800;
	}

	.status-completed {
		background-color: rgba(76, 175, 80, 0.1);
		color: #4CAF50;
	}

	.status-archived {
		background-color: rgba(30, 136, 229, 0.1);
		color: #1e88e5;
	}

	.status-default {
		background-color: #f3f4f6;
		color: #6b7280;
	}

	/* 工资单详情样式 */
	.salary-detail {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 8px 16px;
		font-size: 12px;
		margin-top: 12px;
	}

	.detail-item {
		color: #6b7280;
	}

	.detail-label {
		color: #6b7280;
	}

	.detail-value {
		color: #1f2937;
	}

	/* 工资单操作按钮 */
	.salary-actions {
		display: flex;
		justify-content: flex-end;
		gap: 12px;
		margin-top: 12px;
	}

	.salary-btn-view {
		background: transparent;
		border: none;
		font-size: 12px;
		color: #1e88e5;
		padding: 4px 0;
	}

	.salary-btn-edit {
		background: transparent;
		border: none;
		font-size: 12px;
		color: #1e88e5;
		padding: 4px 0;
	}

	.salary-btn-pay {
		background: transparent;
		border: none;
		font-size: 12px;
		color: #4CAF50;
		padding: 4px 0;
	}

	.salary-btn-archive {
		background: transparent;
		border: none;
		font-size: 12px;
		color: #9ca3af;
		padding: 4px 0;
	}

	/* 无数据样式 */
	.no-data {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 48px 0;
	}

	.no-data-icon {
		width: 64px;
		height: 64px;
		border-radius: 50%;
		background-color: #f3f4f6;
		color: #9ca3af;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16px;
	}

	.no-data-title {
		font-size: 16px;
		font-weight: 500;
		color: #1f2937;
		margin-bottom: 8px;
	}

	.no-data-desc {
		font-size: 14px;
		color: #6b7280;
		text-align: center;
		margin-bottom: 24px;
	}

	/* 底部操作栏 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-top: 1px solid #e5e7eb;
		padding: 12px 0;
	}

	.bottom-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.total-count {
		font-size: 12px;
		color: #6b7280;
	}

	.count-num {
		color: #1e88e5;
		font-weight: 500;
	}

	.bottom-add {
		background-color: #1e88e5;
		color: #ffffff;
		border-radius: 6px;
		padding: 8px 16px;
		font-size: 14px;
		border: none;
		display: flex;
		align-items: center;
	}

	.add-icon {
		margin-right: 8px;
	}

	.add-text {
		font-size: 14px;
	}

	/* 居中弹窗容器 */
	.modal-container-center {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		display: none;
		/* 默认隐藏 */
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.5);
	}

	/* 弹窗显示状态 */
	.modal-container-center.modal-show {
		display: flex;
	}

	/* 弹窗隐藏状态 */
	.modal-container-center.modal-hide {
		display: none;
	}

	/* 弹窗样式 */
	.modal-content {
		background-color: #ffffff;
		border-radius: 8px;
		width: 100%;
		max-width: 320px;
		margin: 0 16px;
	}

	.modal-header {
		padding: 16px;
		border-bottom: 1px solid #e5e7eb;
	}

	.modal-title {
		font-size: 16px;
		font-weight: 500;
		color: #1f2937;
	}

	.modal-body {
		padding: 16px;
	}

	.modal-text {
		font-size: 14px;
		color: #374151;
		line-height: 1.5;
	}

	.modal-hidden-input {
		display: none;
	}

	.modal-footer {
		padding: 12px 16px;
		border-top: 1px solid #e5e7eb;
		display: flex;
		justify-content: flex-end;
		gap: 8px;
	}

	/* 按钮样式 */
	.btn-submit {
		background-color: #1e88e5;
		color: #ffffff;
		border-radius: 6px;
		padding: 8px 16px;
		font-size: 14px;
		border: none;
	}

	.btn-secondary {
		background-color: #4CAF50;
		color: #ffffff;
		border-radius: 6px;
		padding: 8px 16px;
		font-size: 14px;
		border: none;
	}

	.btn-cancel {
		background-color: #e5e7eb;
		color: #374151;
		border-radius: 6px;
		padding: 8px 16px;
		font-size: 14px;
		border: none;
	}

	/* 工具类 */
	.container {
		width: 100%;
		max-width: 750rpx;
		margin: 0 auto;
		padding: 0 16px;
	}
</style>